{% load i18n %}
{% load static %}
{% load floppyforms %}
{% load contact_roles %}

<script type="text/javascript">
    // this is used by thumbnail.js to POST to the thumbnail update view
    window.thumbnailUpdateUrl = '{% url 'base-resources-set-thumb-from-bbox' resource.id %}';
</script>
<!--<link href="{% static "lib/css/bootstrap-select.css" %}" rel="stylesheet" />-->
<script type="text/javascript" src="{% static "geonode/js/utils/thumbnail.js" %}"></script>

<!-- Required to make select2 fields work for autocomplete -->
<link href="{% static "vendor/select2/dist/css/select2.css" %}" type="text/css" media="screen" rel="stylesheet" />
<link href="{% static "autocomplete_light/select2.css" %}" type="text/css" media="screen" rel="stylesheet" />
<script type="text/javascript" src="{% static "admin/js/vendor/jquery/jquery.js" %}"></script>
<script type="text/javascript" src="{% static "autocomplete_light/jquery.init.js" %}"></script>
<script type="text/javascript" src="{% static "vendor/select2/dist/js/select2.full.js" %}"></script>
<script type="text/javascript" src="{% static "vendor/select2/dist/js/i18n/en.js" %}"></script>
<script type="text/javascript" src="{% static "autocomplete_light/autocomplete.init.js" %}"></script>
<script type="text/javascript" src="{% static "autocomplete_light/forward.js" %}"></script>
<script type="text/javascript" src="{% static "autocomplete_light/select2.js" %}"></script>
<script type="text/javascript" src="{% static "autocomplete_light/jquery.post-setup.js" %}"></script>

<style>
/* general panel styles */
#mdeditor_form .panel-group .panel{
  overflow: visible;
}
/* date fields proper sizes */
#mdeditor_form .input-group.date {
  width: 100%;
}

/* resizable text-areas */
#mdeditor_form textarea {
  resize: vertical;
  height: 120px;
}

/* question mark (info) distance fom label*/
form #mdeditor_form label{
  margin-right: 0.3em;
}
/* regions */
#regions_multiselect_container .fstElement {
  width: 100%;
}
#regions_multiselect_container .fstChoiceItem {
  background-color: #2c689c;
  border: #2c689c;
}

#mdeditor_form .mandatory-hint,#mdeditor_form .advanced-hint {
  cursor: pointer;
}

/* publishing checkboxes */
#mdeditor_form #id_resource-metadata_uploaded_preserve,
#mdeditor_form #id_resource-is_approved,
#mdeditor_form #id_resource-is_published,
#mdeditor_form #id_resource-featured  {
  float: right;
}

/* mosaiking checkboxes */
#mdeditor_form #id_resource-is_mosaic,
#mdeditor_form #id_resource-has_time,
#mdeditor_form #id_resource-has_elevation  {
  float: right;
}

/* keywords */
#mdeditor_form .tokenfield.form-control {
  height: auto;
}

#mdeditor_form .thesauri_keywords label {
  display: block;
}
#mdeditor_form span.autocomplete-light-widget {
  width: 100%;
}
</style>
<style>
/* metadata edit workflow wizard */
.wizard--progress {
  list-style: none;
  margin: 0;
  padding: 0;
  display: table;
  table-layout: fixed;
  width: 100%;
  color: #2c689c;
}
.wizard--progress > li {
  position: relative;
  display: table-cell;
  text-align: center;
  font-size: 0.8em;
}
.wizard--progress > li:hover {
  cursor: pointer;
}
.wizard--progress > li:before {
  transition: background 0.5s ease 0.1s;
  box-shadow: 5px 5px 5px rgba(0,0,0,.5);
  content: attr(data-step);
  display: block;
  margin: 0 auto;
  background: #DFE3E4;
  width: 3em;
  height: 3em;
  text-align: center;
  margin-bottom: 0.25em;
  line-height: 3em;
  border-radius: 100%;
  position: relative;
  z-index: 1000;
}
.wizard--progress > li:after {
  transition: background 1s ease, width 1s ease;
  width: 0px;
  box-shadow: 5px 5px 5px rgba(0,0,0,.5);
  content: '';
  position: absolute;
  display: block;
  background: #DFE3E4;
  height: 0.5em;
  top: 1.25em;
  left: 50%;
  margin-left: 1.5em\9;
  z-index: -1;
}

.wizard--progress > li:last-child:after {
  display: none;
}
.wizard--progress > li.is-complete {
  color: #333333;
}
.wizard--progress > li.is-complete:before, .wizard--progress > li.is-complete:after {
  color: #FFF;
  background: #333333;
}
.wizard--progress > li.is-complete:before {
  z-index: 1;
}
.wizard--progress > li.is-complete:after {
  transition: background 1s ease, width 1s ease;
  z-index: 0;
  width: 100%;
}
.wizard--progress > li a {
  color: #2c689c;
}
.wizard--progress > li.is-active {
  color: #2c689c;
}
.wizard--progress > li.is-active:before {
  color: #FFF;
  background: #2c689c;
}

.wizard--progress > li.is-complete a {
  color: #000;
}

/**
 * Needed for IE8
 */
.wizard--progress__last:after {
  display: none !important;
}

/**
 * Size Extensions
 */
.wizard--progress--medium {
  font-size: 1.5em;
}

.wizard--progress--large {
  font-size: 2em;
}
.wizard--progress > li:before {
    text-decoration: none;
}
.wizard--progress li:hover a{
  text-decoration: underline;
}
.wizard--progress a, .wizard--progress a:hover:before {
  text-decoration: none;
}

</style>

<style>
/* draggable table */
span.grippy {
  content: '....';
  width: 15px;
  height: 26px;
  display: inline-block;
  overflow: hidden;
  line-height: 5px;
  padding: 3px 4px;
  cursor: move;
  vertical-align: middle;

  font-size: 12px;
  font-family: sans-serif;
  letter-spacing: 2px;
  color: #cccccc;
  text-shadow: 1px 0 1px black;
}
span.grippy::after {
  content: '.. .. .. ..';
}
</style>
<!-- button class="btn btn-success metadata-edit-done" id="btn_upd_md_done" type="submit" style="float:right; opacity: 0;" >{% trans "Done!" %}</button -->
{% block body_outer %}
<ul id="md_tabs" class="nav nav-tabs">
    <li id="metadata_edit_tab" class="active">
        <a data-toggle="tab" href="#edit-metadata"><i class="fa fa-pencil"></i>{% trans "Edit" %}</a>
    </li>
    <li id="preview_tab" dhref="#preview">
        <a data-toggle="tab" href="#preview"><i class="fa fa-camera"></i>{% trans "Preview" %}</a>
    </li>
    <li id="settings_tab" dhref="#settings">
        <a data-toggle="tab" href="#settings"><i class="fa fa-cog"></i>{% trans "Settings" %}</a>
    </li>
    <li class="pull-right">
      <div class="form-actions">
        <a href="{% url "dataset_metadata_advanced" resource.service_typename %}" class="btn btn-primary">{% trans "Advanced Metadata" %}</a>
      </div>
    </li>
</ul>

<div class="tab-content">
<div id="edit-metadata" class="tab-content tab-pane fade in active">
{% block edit_progress %}

  <div id="completeness-hints" class="progress">

  <div class="mandatory-hint progress-bar" role="progressbar" style="width:25%">
    {% trans "Mandatory" %}
  </div>
  <div class="advanced-hint progress-bar" role="progressbar" style="width:25%">
    {% trans "Mandatory" %}
  </div>
  {% if UI_REQUIRED_FIELDS %}
      <div class="metadata-hint progress-bar" role="progressbar" style="width:25%">
        {% trans "Mandatory" %}
      </div>
      <div class="progress-bar" role="progressbar" style="width:25%">
        {% trans "Optional" %}
      </div>
  {% else %}
      <div class="progress-bar" role="progressbar" style="width:50%">
        {% trans "Optional" %}
      </div>
  {% endif %}

</div>
{% endblock edit_progress %}
 {% block breadcrumbs %}
  <ul class="wizard--progress wizard--progress--medium">
      <li data-step="1" id="first" class="is-active" data-toggle="tab" href="#mandatory">
          <a>{% trans "Basic Metadata" %}</a>
      </li>
      <li data-step="2" id="second"  data-toggle="tab" href="#advanced">
          <a>{% trans "Location and Licenses" %}</a>
      </li>
      <li data-step="3" data-toggle="tab" href="#ownership">
        {% if UI_REQUIRED_FIELDS %}
            <a>{% trans "Required Metadata" %}</a>
        {% else %}
            <a>{% trans "Optional Metadata" %}</a>
        {% endif %}
      </li>
      <li data-step="4"  data-toggle="tab" href="#dataset">
          <a>{% trans "Dataset Attributes" %}</a>
      </li>
      {% block extra_metadata_steps%}
      {% endblock %}
  </ul>
  {% endblock breadcrumbs %}
  {% block mandatory %}
    <div id="mandatory" class="tab-pane fade in active">
        <!--<br />-->
        <div class="panel-group">
            <div class="panel panel-default">
                <!-- div class="panel-heading">Data info</div -->
                <div class="panel-body">
                    <div class="row">
                        <div class="col">
                            <div id="basicInfo" class="container-fluid">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div id="basicDescriptiveInfo" class="container-fluid">
                              {% block thumbnail %}
                                <div class="col-lg-3">
                                    <span><label for="{{ dataset_form.thumbnail_url|id }}">{% trans "Thumbnail" %}</label></span>
                                    <div id="embedded_map" class="mrg-btm" style="height:250px;width: 250px;">
                                      <div id="preview_map" style="height: 90%;width: 100%;">
                                      </div>
                                      <div id="preview_image" style="height: 90%;width: 100%;">
                                          <img id="preview_image_src" src="{{ dataset_form.thumbnail_url.value }}" height="100%" width="100%"/>
                                      </div>
                                      <div>
                                        <span class="btn-group btn-group-xs btn-group-justified">
                                            <a class="btn btn-default" href="#" id="set_thumbnail">{% trans "Save" %}</a>
                                            <!-- span class="input-group-addon">
                                                <form id="form1" runat="server">
                                                    <input type='file' id="imgInp" />
                                                </form>
                                            </span -->
                                            <a class="btn btn-default" href="#" id="change_thumbnail">{% trans "Edit" %}</a>
                                        </span>
                                      </div>
                                    </div>
                                </div>
                                {% endblock thumbnail %}
                                <div class="col-lg-4">
                                    {% block dataset_title %}
                                    <div id="req_item">
                                      <span><label for="{{ dataset_form.title|id }}">{{ dataset_form.title.label }}</label></span>
                                      <!--<p class="xxs-font-size">(Name by which the cited resource is known)</p>-->
                                      {{ dataset_form.title }}
                                    </div>
                                    {% endblock dataset_title %}
                                    {% block dataset_abstract %}
                                    <div id="req_item">
                                        <span><label for="{{ dataset_form.abstract|id }}">{{ dataset_form.abstract.label }}</label></span>
                                        <!--<p class="xxs-font-size">(Brief narrative summary of the content of the resource/s)</p>-->
                                        {{ dataset_form.abstract }}
                                    </div>
                                    {% endblock dataset_abstract %}
                                </div>
                                <div class="col-lg-5">
                                    {% block dataset_date_type %}
                                    <div class="col-lg-6 col-xs-12">
                                        <span><label for="{{ dataset_form.date_type|id }}">{{ dataset_form.date_type.label }}</label></span>
                                        <!--<p class="xxs-font-size">(Identification of when a given event occurred)</p>-->
                                        {{ dataset_form.date_type }}
                                    </div>
                                    {% endblock dataset_date_type %}
                                    {% block dataset_date %}
                                    <div class="col-lg-6 col-xs-12" id="req_item">
                                        <span><label for="{{ dataset_form.date|id }}">{{ dataset_form.date.label }}</label></span>
                                        <!--<p class="xxs-font-size">(When a given event occurred on the resource)</p>-->
                                        {{ dataset_form.date }}
                                    </div>
                                    {% endblock dataset_date %}
                                    {% block dataset_category %}
                                    <div id="basicCategoryInfo" class="col-lg-12">
                                        <span><label for="{{ category_form.category_choice_field|id }}" class="control-label required-field">{% trans "Category" %}</label></span>
                                        <select
                                            title="{% trans "Choose one of the following..." %}"
                                            data-live-search="true"
                                            data-size="5"
                                            name="category_choice_field"
                                            id="category_form"
                                            class="selectpicker form-control"
                                            >
                                            <option {% if not category_form.initial %} selected="selected" {% endif %} value="">---</option>
                                          {% for choice in category_form.category_choice_field.field.choices %}
                                              <option
                                              {% ifequal category_form.initial choice.0 %} selected="selected" {% endifequal %}
                                              value="{{ choice.0 }}"
                                              data-content="<span class='has-popover' data-container='body' data-toggle='popover' data-placement='top'  data-content=' {{ choice.2.description }}' rigger='hover'><i class='fa {{choice.2.fa_class}}'></i> {{ choice.2.gn_description }}<span>"
                                              >{{ choice.2.gn_description }}</option>
                                          {% endfor %}
                                        </select>
                                    </div>
                                    {% endblock dataset_category %}
                                    {% block dataset_group %}
                                    <div id="basicGroupInfo" class="col-lg-12">
                                        <span><label for="id_resource-group" class="control-label required-field">{% trans "Group" %}</label></span>
                                        <select
                                            title="{% trans "Choose one of the following..." %}"
                                            data-live-search="true"
                                            data-size="5"
                                            name="resource-group"
                                            id="id_resource-group"
                                            class="selectpicker form-control"
                                            >
                                            <option {% if not group %} selected="selected" {% endif %} value="">---</option>
                                            {% for group in metadata_author_groups %}
                                            <option
                                                value="{{ group.group.id }}"
                                                {% ifequal resource.group group.group %} selected="selected" {% endifequal %}
                                                >
                                                {{ group.title }}
                                            </option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                    {% endblock dataset_group %}
                                    {% block dataset_free_keyword %}
                                    <div class="col-lg-12">
                                        <span><label for="{{ dataset_form.date_type|id }}">{{ dataset_form.keywords.label }}</label></span>
                                        {{ dataset_form.keywords }}
                                    </div>
                                    {% endblock dataset_free_keyword %}
                                    {% if THESAURI_FILTERS %}
                                    <div class="col-lg-12 thesauri_keywords">
                                      {{tkeywords_form.as_p}}
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endblock %}
    {% block advanced %}
    <div id="advanced" class="tab-pane fade">
        <div class="panel-group">
                <div class="panel panel-default">
                    <!-- div class="panel-heading">Metadata info</div -->
                    <div class="panel-body">
                        <div class="" id="mdinfo">
                            <div class="">
                            {% block dataset_attributes %}
                                <div class="col-lg-4">
                                    <div>
                                        <span><label for="{{ dataset_form.language|id }}">{{ dataset_form.language.label }}</label></span>
                                        <!--<p class="xxs-font-size">(Language used within the dataset)</p>-->
                                        {{ dataset_form.language }}
                                    </div>
                                    <div>
                                        <span><label for="{{ dataset_form.license|id }}">{{ dataset_form.license.label }}</label></span>
                                        <!--<p class="xxs-font-size">(License of the dataset)</p>-->
                                        {{ dataset_form.license }}
                                    </div>
                                    <div>
                                        <span><label for="{{ dataset_form.attribution|id }}">{{ dataset_form.attribution.label }}</label></span>
                                        {{ dataset_form.attribution }}
                                    </div>
                                </div>
                                {% endblock dataset_attributes %}
                                {% block dataset_regions %}
                                <div class="col-lg-4">
                                      <div id="regions_multiselect_container">
                                          <span><label for="{{ dataset_form.regions|id }}">{{ dataset_form.regions.label }}</label></span>
                                          {{ dataset_form.regions }}
                                      </div>
                                      <div>
                                          <span><label for="{{ dataset_form.data_quality_statement|id }}">{{ dataset_form.data_quality_statement.label }}</label></span>
                                          <!--<p class="xxs-font-size">(General explanation of the data producer's knowledge about the lineage)</p>-->
                                          {{ dataset_form.data_quality_statement }}
                                      </div>
                                </div>
                                {% endblock dataset_regions %}
                                {% block dataset_constraints %}
                                <div class="col-lg-4">
                                    <div>
                                        <span><label for="{{ dataset_form.restriction_code_type|id }}">{{ dataset_form.restriction_code_type.label }}</label></span>
                                        <!--<p class="xxs-font-size">(Limitation/s placed upon the access or use of data)</p>-->
                                        {{ dataset_form.restriction_code_type }}
                                    </div>
                                    <div>
                                        <span><label for="{{ dataset_form.constraints_other|id }}">{{ dataset_form.constraints_other.label }}</label></span>
                                        <!--<p class="xxs-font-size">(Other restrictions and legal prerequisites for accessing or use data and metadata)</p>-->
                                        {{ dataset_form.constraints_other }}
                                    </div>
                                </div>
                                {% endblock dataset_constraints %}
                            </div>
                            <div class="row">
                            </div>
                        </div>
                    </div>
                </div>
        </div>
    </div>
    {% endblock %}
    {% block other_tab %}{% endblock other_tab %}
    {% block ownership %}
    <div id="ownership" class="tab-pane fade">
        <div class="panel-group"><div class="panel panel-default"><div class="panel-body">
        <div id="mdinfo">
            <div class="col-xs-12 col-lg-4">
              <p>{% trans "Other, Optional, Metadata" %}</p>
                {% block dataset_edition %}
                <div>
                    <span><label for="{{ dataset_form.edition|id }}">{{ dataset_form.edition.label }}</label></span>
                    <!--<p class="xxs-font-size">(Version of the cited resource)</p>-->
                    {{ dataset_form.edition }}
                </div>
                {% endblock dataset_edition %}
                {% block dataset_doi %}
                <div>
                    <span><label for="{{ dataset_form.doi|id }}">{{ dataset_form.doi.label }}</label></span>
                    {{ dataset_form.doi }}
                </div>
                {% endblock dataset_doi %}
                {% block dataset_purpose %}
                <div>
                    <span><label for="{{ dataset_form.purpose|id }}">{{ dataset_form.purpose.label }}</label></span>
                    <!--<p class="xxs-font-size">(Brief narrative summary of the intentions with which the resource/s ...)</p>-->
                    {{ dataset_form.purpose }}
                </div>
                {% endblock dataset_purpose %}
                {% block dataset_supplemental_information %}
                <div>
                    <span><label for="{{ dataset_form.supplemental_information|id }}">{{ dataset_form.supplemental_information.label }}</label></span>
                    <!--<p class="xxs-font-size">(Any other descriptive information about the dataset)</p>-->
                    {{ dataset_form.supplemental_information }}
                </div>
                {% endblock dataset_supplemental_information %}
            </div>
            <div class="col-xs-12 col-lg-5">
                   {% block dataset_temporal_extent_start %}
                    <div class="col-xs-12 col-lg-6 check-select">
                      <div class="input-group date">
                        <span><label for="{{ dataset_form.temporal_extent_start|id }}">{{ dataset_form.temporal_extent_start.label }}</label></span>
                        <!--<p class="xxs-font-size">(When a given event occurred on the resource)</p>-->
                        {{ dataset_form.temporal_extent_start }}
                        </div>
                    </div>
                    {% endblock dataset_temporal_extent_start %}
                    {% block dataset_temporal_extent_end %}
                    <div class="col-xs-12 col-lg-6 check-select">
                        <div class="input-group date">
                        <span><label for="{{ dataset_form.temporal_extent_end|id }}">{{ dataset_form.temporal_extent_end.label }}</label></span>
                        <!--<p class="xxs-font-size">(Identification of when a given event occurred)</p>-->
                        {{ dataset_form.temporal_extent_end }}
                        </div>
                    </div>
                    {% endblock dataset_temporal_extent_end %}
                <div class="col-xs-12">
                    {% block dataset_maintenance_frequency %}
                    <div style="margin-top: 5px">
                        <span><label for="{{ dataset_form.maintenance_frequency|id }}">{{ dataset_form.maintenance_frequency.label }}</label></span>
                        <!--<p class="xxs-font-size">(Identification of when a given event occurred)</p>-->
                        {{ dataset_form.maintenance_frequency }}
                    </div>
                    {% endblock dataset_maintenance_frequency %}
                    {% block dataset_spatial_representation_type %}
                    <div style="margin-top: 5px">
                        <span><label for="{{ dataset_form.spatial_representation_type|id }}">{{ dataset_form.spatial_representation_type.label }}</label></span>
                        <!--<p class="xxs-font-size">(Method used to represent geographic information in the dataset)</p>-->
                        {{ dataset_form.spatial_representation_type }}
                    </div>
                    {% endblock dataset_spatial_representation_type %}
                    {% block layer_extra_metadata %}
                    <div style="margin-top: 5px">
                      <span><label for="{{ dataset_form.extra_metadata|id }}">{{ dataset_form.extra_metadata.label }}</label></span>
                      {{ dataset_form.extra_metadata }}
                    </div>
                    {% endblock layer_extra_metadata %}
                    {% block dataset_linked_resources %}
                        <div id="linked_resources">
                          <span><label for="{{ dataset_form.linked_resources|id }}">{% trans "Related resources" %}</label></span>
                          {{ dataset_form.linked_resources }}
                        </div>
                    {% endblock dataset_linked_resources %}
                </div>
            </div>
            <!-- Contact Roles -->
            <div class="col-xs-12 col-lg-3" >
              <div class="panel panel-default" class="collapse" style="margin-top: 5px">
                <div class="panel-heading">{% trans "Responsible Parties" %}</div>
                  {% block dataset_poc %}
                  <div class="panel-body check-select">
                      <span><label for="{{ dataset_form.poc|id }}">{{ dataset_form.poc.label }}</label></span>
                      {{ dataset_form.poc }}
                  </div>
                  {% endblock dataset_poc %}
            </div>
              <div class="panel panel-default">
                  <div class="panel-heading">{% trans "Responsible and Permissions" %}</div>
                  <div class="panel-body">
                    {% block dataset_owner %}
                      <div>
                          <span><label for="{{ dataset_form.owner|id }}">{{ dataset_form.owner.label }}</label></span>
                          {{ dataset_form.owner }}
                      </div>
                    {% endblock dataset_owner %}
                  </div>
                </div>
              <a href="#id-more-metadata-panel" data-toggle="collapse">{% trans "toggle more Contact Roles" %}</a>
              {% block dataset_more_contact_roles %}
              <div class="panel panel-default panel-collapse collapse" collapsed id='id-more-metadata-panel'>
                <div class="panel-heading">{% trans "more metadata contact roles" %}</div>
                  {% for contact_role in UI_ROLES_IN_TOGGLE_VIEW %}
                    {% getattribute dataset_form contact_role as cr %}
                    <div class="panel-body">
                      <div>
                        <span><label for="{{cr|id}}">{{cr.label}}</label></span>
                        {{ cr}}
                      </div>
                    </div>
                  {% endfor %}
                </div>
              </div>
              {% endblock dataset_more_contact_roles %}
            </div>
            <!--End Contact Roles -->
          </div>
        </div>
      </div>
    </div>
    {% endblock %}
    {% block dataset %}
    <div id="dataset" class="tab-pane fade">
      <div class="panel-group"><div class="panel panel-default"><div class="panel-body">
        <div>
          <div style="padding: 15px">
            <div>
                <label>{% trans "Use a custom template?" %}</label>
                <input type="checkbox" name="resource-use_featureinfo_custom_template" class="has-external-popover"
                  data-content="specifies wether or not use a custom GetFeatureInfo template." data-placement="right"
                  data-container="body" data-html="true" data-toggle="toggle"
                  placeholder="specifies wether or not use a custom GetFeatureInfo template."
                  id="id_resource-use_featureinfo_custom_template"
                  {% if resource.use_featureinfo_custom_template %}checked{% endif %}>
                <div id="layer-attributes-panel"
                  {% if resource.use_featureinfo_custom_template %}style="visibility: collapse;" {% endif %}>
                  {{ attribute_form.management_form }}
                  <table class="table table-striped table-bordered table-condensed">
                      <tr class="table-header">
                          <th style="width:25px;background: #efefef;"></th>
                          <th>{% trans "Attribute" %}</th>
                          <th>{% trans "Label" %}</th>
                          <th>{% trans "Description" %}</th>
                          <th>{% trans "Display Order" %}</th>
                          <th>{% trans "Display Type" %}</th>
                          <th>{% trans "Visible" %}</th>
                      </tr>
                      {% for form in attribute_form.forms %}
                      {% if form.attribute %}
                      <tr>
                          <td style="width:25px;background: #efefef;"> <span class="grippy"></span></td>
                          <td><div style="display:none">{{form.id}}</div>{{form.attribute}}</td>
                          <td>{{form.attribute_label}}</td>
                          <td>{{form.description}}</td>
                          <td>{{form.display_order}}</td>
                          <td>{{form.featureinfo_type}}</td>
                          <td>{{form.visible}}</td>
                      </tr>
                      {% endif %}
                      {% endfor %}
                  </table>
                </div>
                <div id="layer-attributes-custom_template"
                  {% if not resource.use_featureinfo_custom_template %}style="visibility: collapse;" {% endif %}>
                  {{dataset_form.featureinfo_custom_template}}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    {% endblock %}
  </div>
    {% block extra_metadata_content %}
    {% endblock %}
</div>
<div id="preview" class="tab-pane fade" style="overflow: hidden;">
    <!-- <iframe id="preview_encoder_iframe" height="100%" width="100%" style="width:0;height:0;border:0;border:none;" src="{% url 'dataset_metadata_detail' resource.alternate %}"></iframe> -->
    {% if metadataxsl %}
        <iframe id="preview_encoder_iframe" frameborder="0" scrolling="yes" onload="if(this.contentWindow.document.body) {$('#preview').height(this.contentWindow.document.body.scrollHeight)}" src="/showmetadata/xsl/{{resource.id}}"></iframe>
    {% else %}
        <iframe id="preview_encoder_iframe" frameborder="0" scrolling="yes" onload="if(this.contentWindow.document.body) {$('#preview').height(this.contentWindow.document.body.scrollHeight)}" src="/catalogue/csw_to_extra_format/{{resource.uuid}}/{{resource.title}}.html"></iframe>
    {% endif %}
</div>
<div id="settings" class="tab-pane fade" style="overflow: hidden;">
  <!--<br />-->
    <div class="col-xs-12 col-lg-4">
      <div class="panel-group">
          <div class="panel panel-default">
              <div class="panel-body">
                <div class="panel panel-default" >
                    <div class="panel-heading">{% trans "Publishing" %}</div>
                      <div class="panel-body">
                        <div>
                            <span><label for="{{ dataset_form.metadata_uploaded_preserve|id }}">{{ dataset_form.metadata_uploaded_preserve.label }}</label></span>
                            {{ dataset_form.metadata_uploaded_preserve }}
                        </div>
                        <div>
                            <span><label for="{{ dataset_form.is_approved|id }}">{{ dataset_form.is_approved.label }}</label></span>
                            {{ dataset_form.is_approved }}
                        </div>
                        <div>
                            <span><label for="{{ dataset_form.is_published|id }}">{{ dataset_form.is_published.label }}</label></span>
                            {{ dataset_form.is_published }}
                        </div>
                        {% if user.is_superuser %}
                        <div>
                            <span><label for="{{ dataset_form.featured|id }}">{{ dataset_form.featured.label }}</label></span>
                            {{ dataset_form.featured }}
                        </div>
                        {% endif %}
                      </div>
                </div>
              </div>
            </div>
     </div>
    </div>
    <div class="col-xs-12 col-lg-4">
      <div class="panel-group">
          <div class="panel panel-default">
              <div class="panel-body">
                <div class="panel panel-default" >
                  <div class="panel-heading">{% trans "Other Settings" %}</div>
                  <div class="panel-body">
                    <div>
                        <span><label for="{{ dataset_form.is_mosaic|id }}">{{ dataset_form.is_mosaic.label }}</label></span>
                        {{ dataset_form.is_mosaic }}
                    </div>
                    <div>
                        <span><label for="{{ dataset_form.has_time|id }}">{{ dataset_form.has_time.label }}</label></span>
                        {{ dataset_form.has_time }}
                    </div>
                    <div>
                        <span><label for="{{ dataset_form.has_elevation|id }}">{{ dataset_form.has_elevation.label }}</label></span>
                        {{ dataset_form.has_elevation }}
                    </div>

                    <div>
                        <span><label for="{{ dataset_form.time_regex|id }}">{{ dataset_form.time_regex.label }}</label></span>
                        {{ dataset_form.time_regex }}
                    </div>
                    <div>
                        <span><label for="{{ dataset_form.elevation_regex|id }}">{{ dataset_form.elevation_regex.label }}</label></span>
                        {{ dataset_form.elevation_regex }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
        </div>
    </div>
    {% if resource.is_vector %}
    <div class="col-xs-12 col-lg-4" id="settings_time_series">
      <div class="panel-group">
          <div class="panel panel-default">
              <div class="panel-body">
                <div class="panel panel-default" >
                  <div class="panel-heading">{% trans "Time series settings" %}     <button type="button" class="btn btn-link" data-toggle="modal" data-target="#exampleModal">
                    <i class="fa fa-question-circle "></i>
                  </button></div>
                  <div class="panel-body">
                    <div>
                      <span><label for="dataset_attribute">Attribute</label></span>
                      {{timeseries_form.attribute}}
                    </div>
                    <div>
                    <span><label for="dataset_end_attribute">End attribute</label></span>
                      {{timeseries_form.end_attribute}}
                    </div>
                    <span><label for="dataset_presentation">Presentation</label></span>
                      {{timeseries_form.presentation}}
                      <div id='precision_value'>
                      <span><label for="dataset_precision_value">Precision Value</label></span><br>
                      {{timeseries_form.precision_value}}<br>
                      <span><label for="dataset_precision_step">Precision Step</label></span>
                      {{timeseries_form.precision_step}}
                    </div>
                  </div>
                  </div>
                </div>
              </div>
            </div>
        </div>
    </div>
    {% endif %}
</div>
</div>

<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function (event) {
    $('#id_resource-use_featureinfo_custom_template').on('change', function (event) {
        if (this.checked) {
          $('#layer-attributes-panel').css("visibility", "collapse");
          $('#layer-attributes-custom_template').css("visibility", "visible");
        } else {
          $('#layer-attributes-panel').css("visibility", "visible");
          $('#layer-attributes-custom_template').css("visibility", "collapse");
        }
    });
  });
</script>
{% endblock %}

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">{% trans "Additional Help" %}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <h4>{% trans "Enabling Time" %}</h4>
        <p>{% blocktrans %}A dataset can support one or two time attributes. If a single
                        attribute is used, the dataset is considered to contain data that is valid at single points in time. If two
                        attributes are used, the second attribute represents the end of a valid period  hence the dataset is considered
                        to contain data that is valid at certain periods in time.{% endblocktrans %}</p>
        <h4>{% trans "Selecting an Attribute" %}</h4>
        <p>{% trans "A time attribute can be" %}:</p>
        <ul>
          <li>{% trans "An existing date" %}</li>
          <li>{% trans "Text that can be converted to a timestamp" %}</li>
          <li>{% trans "A number representing a year" %}</li>
        </ul>
        <p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
